<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <input type="text " v-model="msg" />
      <h1>msg:{{msg}}</h1>
      <h2>reverseMsg:{{reverseMsg}}</h2>
    </div>
  </body>
</html>
<script src="http://chst.vip:8081/vue.js"></script>
<script>
  // computed和watch不同之处
  // 1.watch和computed针对的目的是不一样的，computed是对数据的预处理，返回新数据，而watch单纯的侦听数据的变化，当属性发生变化的时候可以给我们的业务增加额外的逻辑
  // 2.watch一次只能侦听一个数据,computed可以侦听到多个属性的变化（重要！！！！）
  const vm = new Vue({
    el: "#app",
    data: {
      msg: "今夜我又来到你的窗外，窗帘上你的影子是多么的可爱",
      age: 18,
    },
    computed: {
      reverseMsg() {
        console.log("msg==" + this.msg);
        console.log("age==" + this.age);
        return this.msg.split("").reverse().join("") + this.age;
      },
    },
    watch: {
      msg(newVal) {
        console.log(newVal);
      },
      age(newVal) {
        console.log(newVal);
      },
    },
  });
</script>
